<template>
  <div>
    <div class="experiment-order">
      <el-select v-model="order" placeholder="请选择排序方式" @change="orderBy" style="width: 200px;">
        <el-option label="按人气排名" value=1></el-option>
        <el-option label="默认排序" value="0"></el-option>
      </el-select>
      <div class="experiment-search" style="text-align: right;">
        <el-input
            v-model="keyword"
            placeholder="请输入实验名称"
            style="width: 200px;"
            suffix-icon="el-icon-search"
            @clear="handleClear"
            @keyup.enter.native="handleSearch"
        ></el-input>
      </div>
    </div>
    <div class="experiment-cate">
      <span v-for="(category, index) in categories" :key="index"
            :class="{ 'selected-category': category === selectedCategory }"
            @click="changeType(index); selectedCategory = category">
        {{ category.rangeTypeName }}
      </span>
    </div>
    <div class="experiments">
      <el-card v-for="(item, index) in experiments" :key="index" class="experiment-item">
        <div slot="header" class="experiment-title" @click="goToDetail(item)">{{ item.rangeName }}</div>
        <div class="experiment-desc" @click="goToDetail(item)"> {{ item.rangeDetail }}</div>
      </el-card>
    </div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[12, 24, 36, 48]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "OnlineLab",
  data() {
    return {
      order: "0",
      currentPage: 1,
      pageSize: 12,
      total: 0,
      keyword: "",
      type: 1,
      categories: [],
      selectedCategory: "发现",
      experiments: [],
    };
  },
  methods: {
    //
    initCategories() {
      return this.$axios.get("/rangetype/categories").then((res) => {
        this.categories = res.data;
      });
    },
    initExperiments() {
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword,
        order: this.order,
        type: this.type
      }
      this.$axios.post("/range/selectRange", params).then((res) => {
        this.experiments = res.data.records;
        this.total = res.data.total;
      });
      console.log("this.experiments");
    },
    handleSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.initExperiments();
    }
    ,
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initExperiments();
    }
    ,
    orderBy() {
      this.initExperiments();
    }
    ,
    changeType(type) {
      this.type = type + 1
      this.initExperiments();
    }
    ,
    handleSearch() {
      this.initExperiments();
    }
    ,
    handleClear() {
      this.keyword = "";
      this.initExperiments();
    }
    ,
    goToDetail(item) {
      this.$router.push({
        name: 'Detail',
        params: { id: item.rangeId, name: item.rangeName },
      });
    }

  },
  created() {
    this.initCategories().then(() => {
      if (this.categories.length > 0) {
        this.selectedCategory = this.categories[0];
      }
    });
    this.initExperiments();
    // this.addVisitCount();
  },
}
</script>

<style scoped>

.experiment-cate {
  margin-bottom: 20px;
}

.experiments {
  position: relative;
  top: -70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.experiment-item {
  height: 120px;
  cursor: pointer;
}

.experiment-title {
  font-size: 18px;
  font-weight: bold;
}

.experiment-desc {
  height: calc(100% - 40px);
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.5;
}

.selected-category {
  background-color: rgba(64, 158, 255, 0.5);
  color: white;
}

.experiment-cate {
  position: relative;
  top: -70px;
  margin-left: 25%;
  margin-bottom: 20px;
  /*display: flex;*/
  /*justify-content: flex-start;*/
}

.experiment-cate span {
  padding: 6px 12px;
  margin-right: 10px;
  background-color: #e6e6e6;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.experiment-cate span:hover {
  background-color: #a9a9a9;
  color: white;
}

.selected-category {
  background-color: #409eff;
  color: black;
  /*font-weight: bold;*/
  box-shadow: 0 0 5px #409eff;
}

.pagination {
  position: relative;
  top: -70px;
  margin-left: 25%;
}

.experiment-search {
  position: relative;
  top: -35px;
  margin-left: 25%;

}
</style>